<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<ui:composition template="/WEB-INF/template/mainTemplate.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets">
    <ui:define name="content">
        <script src="#{request.contextPath}/js/jquery.openid.js"/>
        <script type="text/javascript">
            $(function () {
                $("form.openid:eq(0)").openid();
            });
        </script>
        <h1>Please Login with your OpenID Account</h1>

        <p> Lorem ipsum dolor sit amet, turpis egestas commodo, eget non ultrices nec lectus, ac interdum, netus aliquam.</p>


        <h:panelGroup rendered="#{param['login_error']}">
            Could not Login
        </h:panelGroup>

        <form class="openid" method="post" action="#{request.contextPath}/j_spring_openid_security_check">
            <div>
                <ul class="providers">
                    <li class="openid" title="OpenID"><img src="#{request.contextPath}/img/openidW.png" alt="icon"/>
                        <span><strong>http://{your-openid-url}</strong></span></li>
                    <li class="direct" title="Google">
                        <img src="#{request.contextPath}/img/googleW.png"
                             alt="icon"/><span>https://www.google.com/accounts/o8/id</span>
                    </li>
                    <li class="direct" title="Yahoo">
                        <img src="#{request.contextPath}/img/yahooW.png" alt="icon"/><span>http://yahoo.com/</span></li>
                    <li class="username" title="AOL screen name">
                        <img src="#{request.contextPath}/img/aolW.png"
                             alt="icon"/><span>http://openid.aol.com/<strong>username</strong></span></li>
                    <li class="username" title="MyOpenID user name">
                        <img src="#{request.contextPath}/img/myopenid.png"
                             alt="icon"/><span>http://<strong>username</strong>.myopenid.com/</span>
                    </li>
                    <li class="username" title="Flickr user name">
                        <img src="#{request.contextPath}/img/flickr.png"
                             alt="icon"/><span>http://flickr.com/<strong>username</strong>/</span></li>
                    <li class="username" title="Technorati user name">
                        <img src="#{request.contextPath}/img/technorati.png"
                             alt="icon"/><span>http://technorati.com/people/technorati/<strong>username</strong>/</span>
                    </li>
                    <li class="username" title="Wordpress blog name">
                        <img src="#{request.contextPath}/img/wordpress.png"
                             alt="icon"/><span>http://<strong>username</strong>.wordpress.com</span>
                    </li>
                    <li class="username" title="Blogger blog name">
                        <img src="#{request.contextPath}/img/blogger.png"
                             alt="icon"/><span>http://<strong>username</strong>.blogspot.com/</span></li>
                    <li class="username" title="LiveJournal blog name">
                        <img src="#{request.contextPath}/img/livejournal.png"
                             alt="icon"/><span>http://<strong>username</strong>.livejournal.com</span>
                    </li>
                    <li class="username" title="ClaimID user name">
                        <img src="img/claimid.png"
                             alt="{request.contextPath}/icon"/><span>http://claimid.com/<strong>username</strong></span>
                    </li>
                    <li class="username" title="Vidoop user name">
                        <img src="#{request.contextPath}/img/vidoop.png"
                             alt="icon"/><span>http://<strong>username</strong>.myvidoop.com/</span></li>
                    <li class="username" title="Verisign user name">
                        <img src="#{request.contextPath}/img/verisign.png"
                             alt="icon"/><span>http://<strong>username</strong>.pip.verisignlabs.com/</span>
                    </li>
                </ul>
            </div>
            <fieldset>
                <label for="openid_username">Enter your <span>Provider user name</span></label>

                <div><span></span><input type="text" name="openid_username"/><span></span>
                    <input type="submit" value="Login"/></div>
            </fieldset>
            <fieldset>
                <label for="openid_identifier">Enter your <a class="openid_logo"
                                                             href="http://openid.net">OpenID</a></label>

                <div><input type="text" name="openid_identifier"/>
                    <input type="submit" value="Login"/></div>
            </fieldset>
        </form>

    </ui:define>
</ui:composition>
</html>

